<template>
	<view>
		<u-navbar placeholder fixed autoBack border title="工资详情"></u-navbar>
		<view class="d-p-30" v-if="info">
			<view class="d-font-32" style="font-weight: bold;color: #323334;">工资发放概况</view>
			<view class="d-m-t-10 d-font-28" style="color: #949AA2;">
				<view class="d-flex u-border-bottom" style="height: 80rpx;">
					<view class="d-flex-1">账户累积拨付金额</view>
					<text style="color: #162233;">{{ info ? info.disburse : 0 }}元</text>
				</view>
				<view class="d-flex u-border-bottom" style="height: 80rpx;">
					<view class="d-flex-1">累积发放次数</view>
					<text style="color: #162233;">{{ info ? info.cumtimes : 0 }}次</text>
				</view>
				<view class="d-flex u-border-bottom" style="height: 80rpx;">
					<view class="d-flex-1">累积发放人数</view>
					<text style="color: #162233;">{{ info ? info.cumstaffs : 0 }}人</text>
				</view>
				<view class="d-flex u-border-bottom" style="height: 80rpx;">
					<view class="d-flex-1">累积发放金额</view>
					<text style="color: #162233;">{{ info ? info.cumsalary : 0 }}元</text>
				</view>
				<view class="d-flex u-border-bottom" style="height: 80rpx;">
					<view class="d-flex-1">专户余额</view>
					<text style="color: #162233;">{{ info ? info.balance : 0 }}元</text>
				</view>
			</view>

			<view class="d-font-32 d-m-t-40" style="font-weight: bold;color: #323334;">工资发放列表</view>
			<template v-if="list && list.length > 0">
				<view class="card d-p-30 d-m-t-30" v-for="(item, index) in list" :key="index" @click="wagesItemDetail(item)">
					<view class="d-flex d-font-24" style="color: #5D6672;">
						<view class="d-flex-1">
							<text>工资期(间)</text>
							<text class="d-m-l-20" style="color: #162233;">{{ item.ffgzny || '无' }}</text>
						</view>
						<view class="d-flex-1">
							<text>发放日期</text>
							<text class="d-m-l-20" style="color: #162233;">{{ item.ffrq || '无' }}</text>
						</view>
					</view>
					<view class="d-flex d-m-t-20 d-font-24" style="color: #5D6672;">
						<view class="d-flex-1">
							<text>发放人数</text>
							<text class="d-m-l-20" style="color: #162233;">{{ item.ffrs || 0 }}</text>
						</view>
						<view class="d-flex-1">
							<text>发放金额</text>
							<text class="d-m-l-20" style="color: #162233;">{{ item.sfgzhj || 0 }}万元</text>
						</view>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="d-p-80"><u-empty icon="/static/image/none.png" text="暂无数据"></u-empty></view>
			</template>
		</view>
	</view>
</template>

<script>
import { appSc, salaries } from '../../../common/api.js';
export default {
	data() {
		return {
			id: null,
			info: null,
			pageNum: 1,
			pageSize: 1,
			pageLast: 1,
			list: []
		};
	},
	onLoad(e) {
		this.id = e.id;
		this.init();
	},
	onReachBottom() {
		if (this.pageLast > this.pageNum) {
			++this.pageNum;
			this.salaries().then(e => {
				this.list = this.list.concat(e.data);
			});
		}
	},
	methods: {
		init() {
			appSc({
				params: {
					gcbh: this.id
				}
			}).then(e => {
				this.info = e.data;
			});
			this.salaries().then(e => {
				this.list = e.data;
				this.pageLast = Math.ceil(e.total / this.pageSize);
			});
		},
		salaries() {
			return salaries({
				params: {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					gcbh: this.id
				}
			});
		},
		wagesItemDetail(item) {
			uni.$u.route({
				url: '/pages/index/wages/wagesItemDetail',
				params: {
					id: item.id
				}
			});
		}
	}
};
</script>

<style lang="scss">
.card {
	border-radius: 10rpx;
	background-color: #f6f7f8;
}
page {
	background-color: #fff;
}
</style>
